<template>
  <view class="sn-taking-container">
    <!-- 查询区域 -->
    <view class="query-section">
      <view class="query-header">
        <text class="query-title">SN盘点单</text>
        <view class="pending-btn" @click="goToPendingList">
          <uni-icons type="list" size="16" color="#007AFF"></uni-icons>
          <text class="btn-text">待处理</text>
        </view>
      </view>
    </view>

    <view class="empty-state" v-if="!checkInfo">
      <uni-icons type="info-filled" size="60" color="#ccc"></uni-icons>
      <text class="empty-text">请选择待处理盘点单</text>
    </view>

    <!-- 盘点单主表信息 -->
    <view class="info-section" v-if="checkInfo">
      <view class="info-header">
        <text class="info-title">盘点单信息</text>
        <view class="info-status" :class="getStatusClass(checkInfo.status)">
          {{ getStatusText(checkInfo.status) }}
        </view>
      </view>
      <view class="info-content">
        <view class="info-row">
          <text class="info-label">盘点单号：</text>
          <text class="info-value">{{ checkInfo.takingCode }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">名称：</text>
          <text class="info-value">{{ checkInfo.takingName }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">日期：</text>
          <text class="info-value">{{ checkInfo.takingDate }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">备注：</text>
          <text class="info-value">{{ checkInfo.remark || '' }}</text>
        </view>
      </view>
      
    </view>

    <view class="scan-section" v-if="checkInfo">
      <view class="query-header">
        <text class="query-title">扫描SN确认</text>
        <view class="scan-button" @click="startScanForSn">
          <uni-icons type="scan" size="40" color="#ffffff"></uni-icons>
        </view>
      </view>
      <view class="query-input-area">
        <view class="input-group">
          <view class="input-wrapper">
            <input
              class="query-input"
              v-model="snToConfirm"
              placeholder="请扫描或输入SN"
              @confirm="handleConfirmSn"
            />
            <view class="input-icon clear-icon" @click="snToConfirm = ''">
              <uni-icons type="clear" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- SN确认列表 -->
    <view class="sn-lists-section" v-if="checkInfo">
      <view class="section-header">
        <text class="section-title">SN确认明细</text>
        <text class="section-count">总计 {{ totalCount }}</text>
      </view>

      <!-- Tab切换 -->
      <view class="tab-container">
        <view class="tab-list">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab-item"
            :class="{ active: currentTab === tab.key }"
            @click="switchTab(tab.key)"
          >
            <text class="tab-text">{{ tab.label }}</text>
            <view class="tab-badge" v-if="tab.count > 0">{{ tab.count }}</view>
          </view>
        </view>
      </view>

      <!-- 当前选中Tab的内容 -->
      <view class="tab-content">
        <scroll-view
          scroll-y
          class="sn-scroll-view"
          @scrolltolower="loadMoreData"
          :scroll-top="scrollTop"
        >
          <!-- 加载状态 -->
          <view v-if="loadingStates[currentTab].loading && currentData.length === 0" class="loading-state">
            <uni-load-more status="loading" />
            <text class="loading-text">加载中...</text>
          </view>

          <!-- 数据列表 -->
          <view v-else-if="currentData.length > 0" class="sn-data-list">
            <view
              v-for="(item, idx) in currentData"
              :key="item.lineId || idx"
              class="sn-data-item"
            >
              <view class="sn-info">
                <text class="sn-code">{{ item.sn }}</text>
                <view class="sn-details">
                  <text class="item-code">{{ item.itemCode  || ''}}</text>
                  <text class="item-name">{{ item.itemName || '' }}</text>
                  <text class="specification">{{ item.specification || ''}}</text>
                  <text class="warehouse" v-if="item.warehouseName">{{ item.warehouseName || '' }}</text>
                  <text class="operator-time" v-if="item.operatorTime && (currentTab === 'CONFIRMED' || currentTab === 'NOT_FOUND')">
                    操作时间：{{ formatTime(item.operatorTime) }}
                  </text>
                </view>
              </view>
              <view class="sn-status" :class="getStatusClass(item.status, 'item')">
                {{ getStatusText(item.status, 'item') }}
              </view>
            </view>
          </view>

          <!-- 空状态 -->
          <view v-else-if="!loadingStates[currentTab].loading && currentData.length === 0" class="empty-state-small">
            <uni-icons type="info-filled" size="40" color="#ccc"></uni-icons>
            <text class="empty-text">暂无数据</text>
          </view>

          <!-- 加载更多状态 -->
          <view v-if="loadingStates[currentTab].loading && currentData.length > 0" class="load-more">
            <uni-load-more status="loading" />
          </view>

          <!-- 没有更多数据 -->
          <view v-if="!loadingStates[currentTab].hasMore && currentData.length > 0" class="no-more">
            <text class="no-more-text">没有更多数据了</text>
          </view>
        </scroll-view>
      </view>
    </view>

  </view>
</template>

<script>
import { getDetailLines, confirmDetail, addNotFoundDetail, countStatus } from '@/api/wm/snTaking.js'

export default {
  name: 'SnTakingIndex',
  data() {
    return {
      queryData: {
        takingId: null  // 盘点单ID
      },
      checkInfo: null, // 盘点单信息
      snToConfirm: '',

      // Tab相关
      currentTab: 'PREPARE',
      tabs: [
        { key: 'PREPARE', label: '未确认', count: 0 },
        { key: 'CONFIRMED', label: '已确认', count: 0 },
        { key: 'NOT_FOUND', label: '不存在', count: 0 }
      ],
      totalCount: 0,

      // 分页数据管理
      snData: {
        PREPARE: { list: [], pageNum: 1, pageSize: 20, total: 0 },
        CONFIRMED: { list: [], pageNum: 1, pageSize: 20, total: 0 },
        NOT_FOUND: { list: [], pageNum: 1, pageSize: 20, total: 0 }
      },

      // 加载状态
      loadingStates: {
        PREPARE: { loading: false, hasMore: true },
        CONFIRMED: { loading: false, hasMore: true },
        NOT_FOUND: { loading: false, hasMore: true }
      },

      scrollTop: 0
    }
  },

  computed: {
    // 当前显示的数据
    currentData() {
      return this.snData[this.currentTab]?.list || [];
    },

    // 是否已选择有效的盘点单
    hasValidTaking() {
      return !!(this.queryData.takingId && this.checkInfo);
    }
  },
  
  onLoad(options) {
    uni.$on('selectedTaking', this.handleSelectedTaking);
  },
  
  onUnload() {
    uni.$off('selectedTaking', this.handleSelectedTaking);
  },
  
  methods: {

    // 优化的刷新方法 - 使用统计接口刷新总数，刷新当前tab的数据
    refreshAfterConfirm(primaryStatus = 'PREPARE') {
      // 使用统计接口刷新所有状态的总数
      const countPromise = countStatus({ takingId: this.queryData.takingId }).then(res => {
        const counts = res.data || {};
        // 更新所有状态的总数
        this.snData.PREPARE.total = counts.PREPARE || 0;
        this.snData.CONFIRMED.total = counts.CONFIRMED || 0;
        this.snData.NOT_FOUND.total = counts.NOT_FOUND || 0;
        // 更新tab计数
        this.updateTabCounts();
        return counts;
      }).catch(error => {
        console.error('获取状态统计失败:', error);
        return {};
      });

      // 刷新当前tab的数据
      const dataPromise = this.loadLinesByStatus(this.currentTab, true);

      // 等待所有查询完成
      Promise.all([countPromise, dataPromise]);
    },

    // 去待处理列表
    goToPendingList() {
      uni.navigateTo({ url: '/pages/app/wm/snTaking/pending' })
    },
    

    // 加载SN明细 - 优化：使用统计接口一次性获取所有状态总数，同时加载当前tab的数据
    loadLines() {
      if (!this.hasValidTaking) {
        return;
      }

      // 重置数据
      this.resetData();

      // 使用统计接口一次性获取所有状态的总数
      const countPromise = countStatus({ takingId: this.queryData.takingId }).then(res => {
        const counts = res.data || {};
        // 更新所有状态的总数
        this.snData.PREPARE.total = counts.PREPARE || 0;
        this.snData.CONFIRMED.total = counts.CONFIRMED || 0;
        this.snData.NOT_FOUND.total = counts.NOT_FOUND || 0;
        // 更新tab计数
        this.updateTabCounts();
        return counts;
      }).catch(error => {
        console.error('获取状态统计失败:', error);
        // 失败时重置为0
        this.snData.PREPARE.total = 0;
        this.snData.CONFIRMED.total = 0;
        this.snData.NOT_FOUND.total = 0;
        this.updateTabCounts();
        return {};
      });

      // 同时加载当前tab的第一页数据
      const dataPromise = this.loadLinesByStatus(this.currentTab, true);

      // 等待所有查询完成
      Promise.all([countPromise, dataPromise]);
    },

    // 重置所有数据
    resetData() {
      const statuses = ['PREPARE', 'CONFIRMED', 'NOT_FOUND'];

      // 重置数据状态
      statuses.forEach(status => {
        this.snData[status] = { list: [], pageNum: 1, pageSize: 20, total: 0 };
        this.loadingStates[status] = { loading: false, hasMore: true };
      });

      // 重置tab计数
      this.tabs.forEach(tab => tab.count = 0);
      this.totalCount = 0;
      this.scrollTop = Math.random(); // 触发scroll-view重置
    },


    // 按状态加载分页数据
    loadLinesByStatus(status, isRefresh = false) {
      if (!this.hasValidTaking) {
        return Promise.resolve();
      }

      const dataState = this.snData[status];
      const loadingState = this.loadingStates[status];

      // 如果是刷新，重置页码和数据
      if (isRefresh) {
        dataState.pageNum = 1;
        dataState.list = [];
        loadingState.hasMore = true;
      }

      // 如果正在加载或没有更多数据，直接返回
      if (loadingState.loading || !loadingState.hasMore) {
        return Promise.resolve();
      }

      loadingState.loading = true;

      const queryParams = {
        takingId: this.queryData.takingId,
        pageNum: dataState.pageNum,
        pageSize: dataState.pageSize,
        status: status
      };

      return getDetailLines(queryParams).then(res => {
        const lines = res.rows || [];
        const total = res.total || 0;

        // 更新数据
        if (isRefresh) {
          dataState.list = lines;
        } else {
          dataState.list.push(...lines);
        }

        dataState.total = total;

        // 更新tab计数
        this.updateTabCounts();

        // 判断是否还有更多数据
        loadingState.hasMore = lines.length >= dataState.pageSize && dataState.list.length < total;
        dataState.pageNum++;

        return res;
      }).catch(error => {
        console.error('加载明细失败:', error);
        return Promise.reject(error);
      }).finally(() => {
        loadingState.loading = false;
      });
    },

    // 更新tab计数
    updateTabCounts() {
      this.tabs.forEach(tab => {
        tab.count = this.snData[tab.key].total;
      });
      this.totalCount = this.tabs.reduce((sum, tab) => sum + tab.count, 0);
    },

    // 清空SN输入框
    clearSnInput() {
      this.snToConfirm = '';
    },

    // 开始相机扫描SN
    startScanForSn() {
      uni.scanCode({
        onlyFromCamera: true,
        success: (res) => {
          this.snToConfirm = res.result
          this.handleConfirmSn()
        },
        fail: () => {
          uni.showToast({ title: '扫码失败', icon: 'none' })
          // 扫码失败也要清空并聚焦输入框
          this.clearSnInput()
        }
      })
    },

    // 处理SN确认
    handleConfirmSn() {
      if (!this.snToConfirm.trim()) {
        uni.showToast({ title: 'SN为空', icon: 'none' })
        this.clearSnInput()
        return
      }
      if (!this.hasValidTaking) {
        uni.showToast({ title: '请先选择盘点单', icon: 'none' })
        this.clearSnInput()
        return
      }

      const currentSn = this.snToConfirm // 保存当前SN值

      uni.showLoading({ title: '确认中...' })
      confirmDetail({ takingId: this.queryData.takingId, sn: currentSn }).then(res => {
        if(res.msg === "NOT_FOUND"){
        //表示SN未找到，需要添加一条SN未找到的信息
        //添加确认输入提示框：
        uni.showModal({
          title: 'SN未找到',
          content: `SN ："${currentSn}" 在库存中未找到，是否要添加此SN未存在的记录？`,
          showCancel: true,
          cancelText: '取消',
          confirmText: '添加记录',
          confirmColor: '#28a745',
				  success: (modalRes) => {
					if (modalRes.confirm) {
						// 用户确认添加记录，调用API保存
						uni.showLoading({ title: '添加记录中...' })
						addNotFoundDetail({ takingId: this.queryData.takingId, sn: currentSn }).then(res => {
							uni.showToast({ title: res.msg || '已添加SN未存在记录', icon: 'success' })
							// 处理完成后清空输入框
							this.clearSnInput()
							// 刷新数据，优先显示NOT_FOUND状态
							this.refreshAfterConfirm('NOT_FOUND')
						}).catch(err => {
              // 处理完成后清空并聚焦
              this.clearSnInput()
						}).finally(() => {
							uni.hideLoading()
						})
					} else if (modalRes.cancel) {
						// 用户取消操作，处理完成后清空输入框
						this.clearSnInput()
					}
				}
			})
      }else{
        uni.showToast({ title: res.msg || '确认成功', icon: 'success' })
        // 处理完成后清空并聚焦
        this.clearSnInput()
        // 刷新数据，优先显示PREPARE状态
        this.refreshAfterConfirm('PREPARE')
		}

      }).catch(err => {
        // API调用失败时也要清空并聚焦
        this.clearSnInput()
      }).finally(() => uni.hideLoading())
    },

    // 切换Tab - 每次点击时刷新当前选中状态的行数据
    switchTab(tabKey) {
      if (this.currentTab === tabKey) return;

      this.currentTab = tabKey;
      this.scrollTop = Math.random(); // 触发scroll-view重置

      // 每次切换tab时都刷新数据
      this.loadLinesByStatus(tabKey, true);
    },

    // 加载更多数据
    loadMoreData() {
      this.loadLinesByStatus(this.currentTab);
    },

    
    // 状态映射配置
    getStatusConfig() {
      return {
        // 盘点单状态
        taking: {
          'PREPARE': { text: '草稿', class: 'status-draft' },
          'CONFIRMED': { text: '确认', class: 'status-confirmed' },
          'FINISHED': { text: '完成', class: 'status-completed' }
        },
        // 明细项状态
        item: {
          'PREPARE': { text: '未确认', class: 'item-status-prepare' },
          'CONFIRMED': { text: '已确认', class: 'item-status-confirmed' },
          'NOT_FOUND': { text: '不存在', class: 'item-status-notfound' }
        }
      };
    },

    // 获取状态文本
    getStatusText(status, type = 'taking') {
      return this.getStatusConfig()[type][status]?.text || status;
    },

    // 获取状态样式类
    getStatusClass(status, type = 'taking') {
      return this.getStatusConfig()[type][status]?.class || `${type}-status-default`;
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return '-';
      const d = new Date(time);
      const y = d.getFullYear();
      const M = String(d.getMonth() + 1).padStart(2, '0');
      const D = String(d.getDate()).padStart(2, '0');
      const h = String(d.getHours()).padStart(2, '0');
      const m = String(d.getMinutes()).padStart(2, '0');
      const s = String(d.getSeconds()).padStart(2, '0');
      return `${y}-${M}-${D} ${h}:${m}:${s}`;
    },

    // 处理从待处理页面带回的盘点单数据
    handleSelectedTaking(task) {
      // 设置盘点单主表信息
      this.checkInfo = task;
      // 设置盘点单ID
      this.queryData.takingId = task.takingId ;
      // 根据盘点单ID查询行信息
      this.loadLines();
    },

  }
}
</script>

<style lang="scss" scoped>
.sn-taking-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.query-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.query-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;

  .query-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .scan-button {
    width: 100rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
    border-radius: 12rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
    transition: all 0.2s ease;

    &:active {
      transform: scale(0.95);
      box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
    }
  }

  .pending-btn {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 20rpx;
    background: rgba(0, 122, 255, 0.1);
    border-radius: 20rpx;
    border: 1rpx solid rgba(0, 122, 255, 0.2);

    .btn-text {
      font-size: 24rpx;
      color: #007AFF;
      font-weight: 500;
    }
  }
}

.scan-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.input-group {
  .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;

    .query-input {
      flex: 1;
      height: 80rpx;
      padding: 0 60rpx 0 20rpx;
      border: 2rpx solid #e0e0e0;
      border-radius: 12rpx;
      font-size: 28rpx;
      background: #fff;
    }

    .input-icon {
      position: absolute;
      padding: 10rpx;
      border-radius: 50%;

      &.clear-icon {
        right: 16rpx;
      }
    }
  }
}

.info-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .info-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .info-status {
    padding: 6rpx 12rpx;
    border-radius: 16rpx;
    font-size: 20rpx;
    
    &.status-draft { background: #f8f9fa; color: #6c757d; }
    &.status-confirmed { background: #d1ecf1; color: #0c5460; }
    &.status-completed { background: #d4edda; color: #155724; }
    &.status-default { background: #f8f9fa; color: #6c757d; }
  }
}

.info-content {
  .info-row {
    display: flex;
    justify-content: space-between;
    padding: 12rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    .info-label {
      font-size: 26rpx;
      color: #666;
      min-width: 140rpx;
    }
    
    .info-value {
      font-size: 26rpx;
      color: #333;
      flex: 1;
      text-align: right;
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-top: 20rpx;
  }
}

.sn-lists-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .section-count {
      font-size: 24rpx;
      color: #666;
    }
  }

  .tab-container {
    margin-bottom: 24rpx;

    .tab-list {
      display: flex;
      background: #f8f9fa;
      border-radius: 12rpx;
      padding: 6rpx;
      border: 1rpx solid #e9ecef;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

      .tab-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx 16rpx;
        border-radius: 8rpx;
        position: relative;
        transition: all 0.3s ease;
        cursor: pointer;

        &.active {
          background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
          box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
          transform: translateY(-2rpx);

          .tab-text {
            color: #fff;
            font-weight: 600;
            font-size: 30rpx;
          }

          .tab-badge {
            background: #fff;
            color: #007AFF;
            border: 1rpx solid #007AFF;
          }
        }

        &:not(.active):hover {
          background: rgba(0, 122, 255, 0.08);
          transform: translateY(-1rpx);
        }

        .tab-text {
          font-size: 28rpx;
          color: #666;
          transition: all 0.3s ease;
          font-weight: 500;
        }

        .tab-badge {
          position: absolute;
          top: -8rpx;
          right: -8rpx;
          background: #ff4757;
          color: #fff;
          border-radius: 16rpx;
          padding: 4rpx 10rpx;
          font-size: 22rpx;
          font-weight: 600;
          min-width: 36rpx;
          text-align: center;
          line-height: 1;
          border: 2rpx solid #fff;
          box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
        }
      }
    }
  }

  .tab-content {
    .sn-scroll-view {
      height: 650rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      border: 1rpx solid #e9ecef;
      box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05);

      .loading-state, .empty-state-small {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60rpx 20rpx;

        .loading-text, .empty-text {
          font-size: 26rpx;
          color: #999;
          margin-top: 16rpx;
        }
      }

      .sn-data-list {
        padding: 0 20rpx;

        .sn-data-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #fff;
          margin-bottom: 16rpx;
          padding: 24rpx;
          border-radius: 12rpx;
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
          border: 1rpx solid #f1f3f4;
          transition: all 0.2s ease;

          &:hover {
            transform: translateY(-2rpx);
            box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
          }

          .sn-info {
            flex: 1;

            .sn-code {
              display: block;
              font-size: 32rpx;
              font-weight: 600;
              color: #1a1a1a;
              margin-bottom: 10rpx;
              font-family: 'Courier New', monospace;
              letter-spacing: 1rpx;
              background: #f8f9fa;
              padding: 8rpx 12rpx;
              border-radius: 6rpx;
              border: 1rpx solid #e9ecef;
            }

            .sn-details {
              .item-code {
                display: block;
                font-size: 24rpx;
                color: #333;
                font-weight: 500;
                margin-bottom: 4rpx;
              }

              .item-name {
                display: block;
                font-size: 24rpx;
                color: #666;
                margin-bottom: 4rpx;
              }

              .specification {
                display: block;
                font-size: 22rpx;
                color: #888;
                margin-bottom: 4rpx;
              }

              .warehouse {
                display: block;
                font-size: 22rpx;
                color: #999;
              }

              .operator-time {
                display: block;
                font-size: 22rpx;
                color: #007AFF;
                margin-top: 8rpx;
                font-weight: 500;
              }
            }
          }

          .sn-status {
            padding: 8rpx 16rpx;
            border-radius: 16rpx;
            font-size: 22rpx;
            font-weight: 600;
            border: 1rpx solid;

            &.item-status-prepare {
              background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
              color: #856404;
              border-color: #856404;
            }

            &.item-status-confirmed {
              background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
              color: #0c5460;
              border-color: #0c5460;
            }

            &.item-status-notfound {
              background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
              color: #721c24;
              border-color: #721c24;
            }

            &.item-status-default {
              background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
              color: #6c757d;
              border-color: #6c757d;
            }
          }
        }
      }

      .load-more, .no-more {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx;

        .no-more-text {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}
</style>
